<template>
	<view class="container padding-lr" :class="{ pad: 1 }">
		<view class="margin-top mianmtips flex align-center text-c6 text-sm">
			<view class="flex-sub flex align-center padding-left">
				<image class="timg" src="../../../static/keyico1.png" mode="aspectFill"></image>
				<text class="margin-left-xs">套餐卡免密支付已开通</text>
			</view>
			<view class="flex align-center padding-lr">
				去设置
				<text class="cuIcon-right"></text>
			</view>
		</view>
		<view class="listBox padding-top">
			<view v-for="(citem, cindex) in 3" :key="cindex" class="listItem">
				<view class="min_qiu fixbox"></view>
				<view class="max_qiu fixbox"></view>
				<view class="mconbox">
					<view class="flex align-center padding-lr">
						<view class="ca_tit flex-sub text-cuts">
							<text class="text-ngreen text-bold">
								<text class="text-xs">￥</text>
								2236.58
							</text>
						</view>
						<view class="ca_staut text-ngreen"><text class="text-sm text-c6">60586596</text></view>
					</view>
					<view class="camainMsg text-c6 text-sm padding-lr">
						<view class="ca_dis flex">
							<view class="flex-sub cdtext">使用说明：本套餐仅限隆平园店使用使用说明：本套餐仅限隆平园店 使用使用说明：本套餐仅限隆平园店使用</view>
							<view class="text-ngreen moredis padding-left-xs">查看更多</view>
						</view>
						<view class="padding-top">手机号：18073533542</view>
					</view>
					<view class="cbot_btn margin-top-sm padding-top-sm flex align-center text-ngreen">
						<view class="flex-sub"></view>
						<!-- <view class="flex-sub padding-left"><view class="actBtn d_ib">充值电子卡</view></view> -->
						<view class="">
							<view class="d_ib padding-lr">修改密码</view>
							|
							<view class="d_ib padding-lr">解绑</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="comBotSection bgf pad_b48"><view class="full_submit_btn nbg margin-top-sm">查看使用记录</view></view>
	</view>
</template>

<script lang="ts" setup>
	import { ref } from "vue";
	// import { onShow } from '@dcloudio/uni-app';

</script>

<style lang="scss">
.container {
	&.pad {
		padding-bottom: 160rpx;
	}
}
.mianmtips {
	width: 100%;
	height: 50rpx;
	background: #eff5ee;
	border-radius: 50rpx;
}
.acon-logo {
	font-size: 60rpx;
}
.timg {
	width: 28rpx;
	height: 28rpx;
}
.listItem {
	width: 100%;
	min-height: 330rpx;
	border-radius: 16rpx;
	background: #f8f6fd;
	position: relative;
	overflow: hidden;
	margin-bottom: 30rpx;
	// &.gry {
	// 	background: #f5f5f5;
	// 	.fixbox {
	// 		background: #eeeeee;
	// 	}
	// 	.ca_staut,
	// 	.ca_tit,
	// 	.camainMsg,
	// 	.moredis,
	// 	.surnums {
	// 		color: #999;
	// 	}
	// }
	&.minpad {
		.camainMsg {
			padding-top: 20rpx;
		}
		.ca_dis {
			margin-top: 6rpx;
		}
	}
	.mconbox {
		position: relative;
		z-index: 3;
		padding-bottom: 30rpx;
		padding-top: 40rpx;
	}
	.min_qiu {
		width: 334rpx;
		height: 334rpx;
		right: -160rpx;
		bottom: -168rpx;
	}
	.max_qiu {
		width: 508rpx;
		height: 508rpx;
		left: -48rpx;
		top: -324rpx;
	}
	.fixbox {
		position: absolute;
		z-index: 1;
		background: #f3eeff;
		border-radius: 50%;
	}
	.ca_tit {
		font-size: 40rpx;
	}
}
.camainMsg {
	padding-top: 60rpx;
}
.moredis {
	margin-right: 120rpx;
}
.cdtext {
	overflow: hidden;
	white-space: nowrap;
}
// .actBtn {
// 	@include baseTag(192rpx, 56rpx);
// 	border-radius: 56rpx;
// 	border: 1px solid #56bf7a;
// }
// .buyBtn {
// 	@include baseTag(142rpx, 56rpx);
// 	border-radius: 56rpx;
// 	background: #56bf7a;
// 	color: #fff;
// }
// .butips {
// 	color: #bccef4;
// 	opacity: 0.9;
// }
</style>